<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>目的地收藏</title>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<meta name="misapplication-tap-highlight" content="no" />
		<meta name="HandheldFriendly" content="true" />
		<meta name="MobileOptimized" content="320" />
		<link rel="stylesheet" type="text/css" href="iconfont/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="css/all_css.css" />
		<link rel="stylesheet" type="text/css" href="css/weui/base.css" />
		<link rel="stylesheet" type="text/css" href="lib/weui.css" />
		<link rel="stylesheet" type="text/css" href="css/weui/jquery-weui.css" />
		<link rel="stylesheet" type="text/css" href="css/KGbtn.css" />
		<style type="text/css">
			#collect_main {
				max-width: 640px;
				min-width: 320px;
				width: 100%;
				margin: 0px auto;
			}
			
			.index_head {
				/*层级在弹出框 和遮罩层之下*/
				z-index: 8 !important;
			}
			
			.app_head_left {
				float: left;
				width: 10%;
				padding-left: 6px;
				padding-top: 6px;
			}
			
			.app_head_left a {
				color: #FFFFFF;
				font-size: 1.5em;
				font-weight: bold;
			}
			
			.app_head_mid {
				float: left;
				width: 55%;
				padding-top: 5px;
			}
			
			.app_head_right {
				float: right;
				width: 35%;
				text-align: right;
				padding-right: 10px;
				padding-top: 10px;
				height: 100%;
				line-height: 25px;
			}
			
			.app_head_right a {
				color: #FFFFFF;
				font-size: 2em;
				font-weight: bold;
				font-family: "黑体";
				margin-left: 10px;
				height: 100%;
				position: relative;
				left: 15px;
			}
			
			#app_head_title {
				text-align: right;
				color: #FFFFFF;
				font-size: 1.6em;
				font-family: "宋体";
				font-weight: bold;
			}
			
			#nullDataImg_collect {
				width: 50%;
				margin-top: 100px;
				margin-left: 25%;
				margin-right: 25%;
			}
			
			.collect_mid {
				padding-top: 70px;
			}
			
			#collect_mid_mainUl {
				padding: 10px 15px;
			}
			
			#collect_mid_mainUl li {
				border-bottom: 1px dashed;
				height: 53px;
				line-height: 52px;
			}
			
			#collect_mid_mainUl li span {
				float: left;
				display: block;
				width: 90%;
				white-space: nowrap;
				/* 不换行 */
				overflow: hidden;
				/* 内容超出宽度时隐藏超出部分的内容 */
				text-overflow: ellipsis;
				/* 当对象内文本溢出时显示省略标记*/
			}
			
			.collectDelBtn {
				float: right;
				width: 6%;
				margin-top: 12px;
				margin-right: 5px;
			}
			/* 删除完成按钮 */
			
			#delFinishBtn {
				font-size: 1.3em;
				position: relative;
				top: -4px;
			}
			/*---遮罩层---*/
			
			.opacity {
				opacity: 0.7;
				filter: alpha(opacity=30);
				background-color: #000;
			}
			
			.mask {
				position: fixed;
				top: 0;
				height: 100%;
				width: 100%;
				/*层级在弹出框之下*/
				z-index: 9;
			}
			
			html,
			body {
				height: 100%;
			}
			/*目的地收藏的隐藏框*/
			
			#addCollectAlert {
				/*display: none;*/
				width: 80%;
				height: 240px;
				background-color: #F9F9F9;
				position: absolute;
				top: 30%;
				left: 10%;
				/*层级在遮罩层之上*/
				z-index: 10;
				border-radius: 15px;
			}
			
			#addCollectAlert h2 {
				height: 30%;
				padding-top: 8%;
				font-size: 1.4em;
				color: #00A1CB;
				font-family: "宋体";
				text-align: center;
				width: 80%;
				margin-left: 10%;
				border-bottom: 1px solid #DEDEDE;
			}
			
			#addCollectAlert p {
				position: absolute;
				bottom: 5%;
				right: 1%;
				text-align: right;
				padding-right: 1em;
				color: #666666;
			}
			
			#addCollectAlert p a {
				color: #0070B4;
				border-bottom: 1px solid;
			}
			
			.addMid_left {
				margin-top: 10%;
				width: 60%;
				margin-left: 8%;
				height: 40px;
				float: left;
				border-radius: 5px;
			}
			
			.addMid_left input {
				width: 100%;
				height: 100%;
				border: none;
				outline: none;
				border-radius: 5px;
				padding-left: 1em;
			}
			
			.addMid_right {
				margin-top: 10%;
				width: 30%;
				float: left;
				text-align: center;
			}
			
			.addMid_right a {
				width: 80%;
				margin-top: 2px;
				height: 35px;
				line-height: 34px !important;
			}
			
			#collect_btn {
				background-color: #FF8C80;
			}
			
			#tangram-suggestion--TANGRAM__1d-main {
				z-index: 9999 !important;
			}
			
			.tangram-suggestion-main {
				z-index: 9999 !important;
			}
		</style>
		<!--地图及密钥-->
		<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=MMh4H9m5FLBpizlht86GnGynuaM0oGKz"></script>
	</head>

	<body ontouchstart>

		<div id="collect_main">
			<div class="index_head">
				<div class="app_head_left">
					<a href="my.html" class="iconfont">&#xe6d4;</a>
				</div>
				<div class="app_head_mid">
					<p id="app_head_title">目的地收藏</p>
				</div>
				<div class="app_head_right">
					<a onclick="alertAddCollect()" class="iconfont">&#xe604;</a>
					<a href="javascript:;" id="delBtnTitle" class="iconfont" style="display: none;">&#xe6e2;</a>
					<a href="javascript:;" id="delFinishBtn" style="display: none;">完成</a>
				</div>
			</div>
			<div class="collect_mid">
				<!--暂无收藏的情况下的图片-->
				<img src="img/my/shoucangNull.png" id="nullDataImg_collect" />
				<ul id="collect_mid_mainUl">

				</ul>
			</div>
		</div>
		<div id="addCollectAlert" style="display: none;">
			<h2>添加目的地</h2>
			<div class="addMid_left">
				<input type="text" name="" id="collectInput" placeholder="请输入地点" />
			</div>
			<div class="addMid_right">
				<a href="javascript:;" class="weui_btn_disabled weui_btn weui_btn_mini weui_btn_primary" id="collect_btn">收藏</a>
			</div>
			<p>您也可以从
				<a href="cxgh.html">出行规划</a>收藏目的地哦</p>
			<div id="l-map" style="display: none;"></div>
		</div>

		<div class="mask opacity" id="opacityDiv" style="display: none;">
			<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
			<script src="js/md5.js" type="text/javascript" charset="utf-8"></script>
			<script src="js/weui/jquery-weui.js" type="text/javascript" charset="utf-8"></script>
			<script src="js/back_end.js" type="text/javascript" charset="utf-8"></script>
			<script src="libs/crypto-js.js" type="text/javascript" charset="utf-8"></script>
			<script src="libs/aes.js" type="text/javascript" charset="utf-8"></script>
			<script src="libs/pad-zeropadding.min.js" type="text/javascript" charset="utf-8"></script>
			<script src="libs/encryption.js" type="text/javascript" charset="utf-8"></script>
			<script type="text/javascript" charset="UTF-8">
				$(function() {
					var userName = JSON.parse(localStorage.userJson)[0].username;
					$.ajax({
						type: "post",
						url: Url,
						data: {
							"type": "end_collections_info",
							"USERNAME": userName
						},
						async: false,
						cache: false,
						dataType: "jsonp", //数据类型为jsonp
						jsonp: "callbackparam", //服务端用于接收callback调用的function名的参数  
						jsonpCallback: "jsonpCallback1",
						success: function(data) {
							if(data.DATA == "[]") {
								//当收藏的条数为0时
								$("#nullDataImg_collect").show();

							} else {
								var d = data.DATA;
								var m = data.MDATA;
								if(isEncrypt(d, m)) {
									var d = eval(d);
									$("#nullDataImg_collect").hide(); //隐藏暂无目的地收藏图片
									$("#delBtnTitle").show(); //显示右上角删除图标
									for(var i = 0; i < d.length; i++) {
										var li = $('<li name="' + i + '"></li>');
										$("#collect_mid_mainUl").append(li);
										var span = $('<span onclick="toCxgh_search(this)">' + eval(data.DATA)[i].ENDSTATION + '</span>');
										var btn = $('<img src="img/my/delBtnCollect.png" class="collectDelBtn" onclick="delThisCollect(this)" style="display: none;"/>');
										$(li).append(span, btn);

									}
								} else {
									errMD();
								}
								//						console.log(eval(data.DATA));
								//						if(data.DATA == "[]") {
								//							$("#nullDataImg").show();
								//						} else {
								//							$("#nullDataImg").hide();
								//						}
							}

						},
						error: function(data) {
							$.alert("连接超时，请稍后再试", "提示");
						}
					});
				});

				//点击添加右上角按钮
				function alertAddCollect() {
					$("#opacityDiv").show();
					$("#addCollectAlert").show(200);
				}
				//点击到遮罩层即隐藏弹出框
				$("#opacityDiv").click(function() {
					$("#opacityDiv").hide();
					$("#addCollectAlert").hide(200);
				});

				//点击右上角删除按钮
				$("#delBtnTitle").click(function() {
					$("#delBtnTitle").hide();
					$("#delFinishBtn").show();
					$("#collect_mid_mainUl li img").show();
				});
				//点击完成按钮 完成删除操作
				$("#delFinishBtn").click(function() {
					$("#delFinishBtn").hide();
					$("#delBtnTitle").show();
					$("#collect_mid_mainUl li img").hide();
				});

				function delThisCollect(t) {
					//				console.log($(t).parents());
					var thisLi = t.parentNode;
					$.confirm("是否要删除这个目的地", function() {
						//点击确认后的回调函数
						var thisR = thisLi.children[0].innerHTML;
						//					console.log(thisR);
						document.getElementById("collect_mid_mainUl").removeChild(thisLi);
						delAjax(thisR);

					}, function() {
						//点击取消后的回调函数
					});
				}
				//后台删除选中的收藏路线方法
				function delAjax(r) {
					var userName = JSON.parse(localStorage.userJson)[0].username;
					//更改数据库内容 加密
					var n1 = r;
					var allData = "USERNAME:" + userName + ",RECID:" + n1;
					allData = encrypt(allData);
					$.ajax({
						type: "post",
						url: Url,
						data: {
							"type": "end_collections",
							"DATA": ""+allData+""
						},
						async: false,
						cache: false,
						dataType: "jsonp", //数据类型为jsonp
						jsonp: "callbackparam", //服务端用于接收callback调用的function名的参数  
						jsonpCallback: "jsonpCallback1",
						success: function(data) {
							//						console.log(data);
						},
						error: function(data) {
							$.alert("连接超时，请稍后再试", "提示");
						}
					});
				}
				//点击每条目的地问题跳转至出行规划 查询我的位置到该目的地的出行方案
				function toCxgh_search(t_content) {
					//设置出行规划也的重点为点击的已存目的地
					var indexP = t_content.innerHTML;
					//				var indexP = "你好";
					var url = "cxgh.html?dz=" + indexP;
					url = encodeURI(url);
					location.href = url;
					//				console.log(url);
				};

				// 百度地图API功能
				var map = new BMap.Map("l-map");
				map.centerAndZoom("长春", 12);
				var ac = new BMap.Autocomplete;

				//当用户在输入框输入时 按钮为禁用状态
				$("#collectInput").keyup(function() {
					$("#collect_btn").addClass("weui_btn_disabled");
				});

				//起点框输入事件
				ac = new BMap.Autocomplete( //建立一个自动完成的对象
					{
						"input": "collectInput",
						"location": "吉林省"
					});
				ac.addEventListener("onhighlight", function(e) { //鼠标放在下拉列表上的事件
					var str = "";
					var _value = e.fromitem.value;
					var value = "";
					if(e.fromitem.index > -1) {
						value = _value.province + _value.city + _value.district + _value.street + _value.business;
					}
					str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

					value = "";
					if(e.toitem.index > -1) {
						_value = e.toitem.value;
						value = _value.province + _value.city + _value.district + _value.street + _value.business;
					}
					str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
					$("#collect_btn").removeClass("weui_btn_disabled");
					//				$("#searchResultPanel").innerHTML = str;
				});

				ac.addEventListener("onconfirm", function(e) { //鼠标点击下拉列表后的事件
					var _value = e.item.value;
					$("#suggestId_start").blur();
					myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
					$("#collect_btn").removeClass("weui_btn_disabled");
					//				$("#searchResultPanel").innerHTML = "onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
				});

				//点击从此页收藏目的地 这个按钮只有未禁用状态下才起作用
				$("#collect_btn").click(function() {
					var userName = JSON.parse(localStorage.userJson)[0].username;
					//操作数据库 加密
					var n1 = $("#collectInput").val();
					var allData = "USERNAME:" + userName + ",ENDSTATION:" + n1;
					allData = encrypt(allData);
					if(!$(this).hasClass("weui_btn_disabled")) {
						$.ajax({
							type: "post",
							url: Url,
							data: {
								"type": "end_collections",
								"DATA": "" + allData + ""
							},
							async: false,
							cache: false,
							dataType: "jsonp", //数据类型为jsonp
							jsonp: "callbackparam", //服务端用于接收callback调用的function名的参数  
							jsonpCallback: "jsonpCallback1",
							success: function(data) {
								if(data.CODE == 1) {
									if(data.MSG == "已存在") { //判断目的地已收藏过
										$.alert("该目的地已收藏过啦！", "提示");
									} else {
										$.alert("收藏成功", "提示", function() {
											window.location.reload(); //收藏成功后刷新本页面
										});
									}
								}
							},
							error: function(data) {
								$.alert("连接超时，请检查网络设置", "提示");
							}
						});
					}

				});
			</script>
	</body>

</html>